.shell-box {
  background-color: var(--black10);
  border-radius: 0.4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  padding: 0 0 var(--space-48) var(--space-16);
  position: relative;

  code {
    color: var(--pink5);
    font-family: inherit;
    line-height: 30px;
    overflow-x: hidden;
    position: absolute;
    top: 30px;
    width: calc(100% - 20px);

    &:hover {
      overflow-x: auto;
    }

    &::-webkit-scrollbar {
      height: 0.5em;
    }

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      overflow: visible;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
    }

    > span.function {
      color: var(--warning5);
    }
  }

  .top {
    display: inherit;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--space-08);

    span,
    button {
      align-items: center;
      display: inherit;
      font-size: var(--font-size-code);
      height: 23px;
      justify-content: center;
      width: 86px;
    }

    span {
      background-color: var(--black3);
      border-radius: 0 0 0.3rem 0.3rem;
      color: var(--black9);
      margin-left: 1.6rem;
    }

    button {
      background-color: var(--brand);
      border-radius: 0 0.3rem 0.3rem 0.3rem;
      border-width: 0;
      i {
        padding: 0;
      }
    }
  }
}
